<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Basil Test for jquery</title>
		
		<!--//optional custom-css theme <link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	-->
		<style type="text/css">
		    #pd{background:white;width:100px;}
            #draggable {  background: silver;}
            #droppable { pbackground: gray;}
            #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	        #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; background:blue;}
	         body{ font: 6pt "Trebuchet MS", sans-serif; margin: 0px;text-align: center;padding: 0px;background:grey}
        </style>
        
        <!-- jquery script library includes -->
		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		
		<!-- jquery functions and handlers -->
		<script type="text/javascript">		
			$(function(){
				$("#sortable").sortable();
		        $("#sortable").disableSelection();
			    $("#pd").draggable();
                $("#pd").click(function(){
                    $.get("test.txt", function(result){
                    $("p").html(result);
                    });
                });
			});
		</script>
	</head>
	
	<body>
	<center>
	    <h1>Basil test!</h1>	
        <div id="pd">
            <p style="font: 10pt 'courier';">[click or drag me]</p>
        </div>
        <div style="text-align:center;background:black;width:400px;box-shadow: 0 0 10px rgba(0, 0, 0, 1);">
            <ul id="sortable" style="text-align:center;">
	            <li style='background:Green;padding:0px;margin:0px;height:90px;border-radius:10px;'></span>Item 1 (30%)</li>
	            <li style='background:blue;padding:0px;margin:0px;height:60px;border-radius:10px;'></span>Item 2 (20%)</li>
	            <li style='background:yellow;padding:0px;margin:0px;height:45px;border-radius:10px;'></span>Item 3 (15%)</li>
	            <li style='background:red;padding:0px;margin:0px;height:15px;border-radius:10px;'></span>Item 4 (5%)</li>
	            <li style='background:violet;padding:0px;margin:0px;height:75px;border-radius:10px;'></span>Item 5 (25%)</li>
	            <li style='background:orange;padding:0px;margin:0px;height:15px;border-radius:10px;'></span>Item 6 (5%)</li>
            </ul>
        </div>
    </center>
	</body>
</html>



